<template>
    <div>
        <div class="stars" :class="starSize">
            <span class="star" v-for="star in stars" :class="star"></span>
        </div>
    </div>
</template>

<script>
    const LENGTH=5
    export default {
        name: "star",
        props:{
            size:Number,
            score:Number,
        },
        computed:{
            starSize(){
                return 'star'+this.size;
            },
            stars(){
                let i
                let arr=[]
                let n=Math.floor(this.score*2)/2
                let x=Math.floor(n)
                let y=n%1? 1: 0
                let z=LENGTH-x-y
                for(i=0;i<x;i++)
                    arr.push(this.starSize+'_on')
                if(y)
                    arr.push(this.starSize+'_half')
                for(i=0;i<z;i++)
                    arr.push(this.starSize+'_off')
                return arr;
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@styles/variables.styl"
    .stars
        &.star24
            .star
                width:12px
                height:12px
                margin-left:6px
        &.star36
            .star
                width:18px
                height:18px
                margin-left:9px
        &.star48
            .star
                width:24px
                height:24px
                margin-left:12px
        .star
            display:inline-block
            &:first-child
                margin-left:0
            &.star24_on
                bgImg('star24_on')
            &.star24_half
                bgImg('star24_half')
            &.star24_off
                bgImg('star24_off')
            &.star36_on
                bgImg('star36_on')
            &.star36_half
                bgImg('star36_half')
            &.star36_off
                bgImg('star36_off')
            &.star48_on
                bgImg('star48_on')
            &.star48_half
                bgImg('star48_half')
            &.star48_off
                bgImg('star48_off')
</style>
